import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import MqttProtocol from './mqtt';
import TcpProtocol from './tcp';
import ModbusProtocol from './modbus';

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
class ProductProtocolDetail extends PureComponent {
  render() {
    const { params, protocolId, protocol } = this.props;

    const showProtocol = protocolType => {
      if (protocolType === 1) {
        return <MqttProtocol protocolIdParam={protocolId} />;
      }
      if (protocolType === 2) {
        return <TcpProtocol protocolId={protocolId} productId={params.id} />;
      }

      if (protocolType === 3) {
        return <ModbusProtocol />;
      }
      return null;
    };
    return <Fragment>{showProtocol(protocol)}</Fragment>;
  }
}

export default ProductProtocolDetail;
